<template>
  <div class="van-stepper">
    <button
      type="button"
      class="van-stepper__minus van-stepper__minus"
      :class="{ 'van-stepper__minus--disabled': dis_sub }"
      :disabled="dis_sub"
      @click="subtraction"
    ></button>
    <input v-model="value" type="number" class="van-stepper__input text-c w-p-80" @input="onChange" />
    <button
      type="button"
      class="van-stepper__plus van-haptics-feedback"
      :class="{ 'van-stepper__plus--disabled': dis_add }"
      :disabled="dis_add"
      @click="addition"
    ></button>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { useCustomFieldValue } from '@vant/use';

const emit = defineEmits(['update:modelValue', 'onChange', 'onDataLoad']);
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: 0
  },
  min: {
    type: Number
  },
  max: {
    type: Number
  }
});

const value = ref(0);
useCustomFieldValue(() => value.value); // 该组件如果用在form组件中 则必须执行

const dis_sub = computed(() => {
  return value.value <= props.min;
});

const dis_add = computed(() => {
  return value.value >= props.max;
});

watch(
  () => props.modelValue,
  val => {
    const v = Number(val);
    const v_ = Number.isFinite(v) ? v : '';
    value.value = v_;
    emit('onChange', value.value);
  },
  {
    immediate: true
  }
);

function subtraction() {
  value.value--;
  emit('update:modelValue', value.value);
}

function addition() {
  value.value++;
  emit('update:modelValue', value.value);
}

function onChange() {
  emit('update:modelValue', value.value);
}

// const min_ = computed(() => {
//   return min_
// })
</script>

<style lang="scss" scoped></style>
